let data = {
  text: 'hello world'
}
let activeEffect
// 制定桶的结构
const bucket = new WeakMap()

const obj = new Proxy(data, {
  get(target, key) {
    if (!activeEffect) {
      return
    }
    let depsMap = bucket.get(target)
    if (!depsMap) {
      bucket.set(target, depsMap = new Map())
    }
    let deps = depsMap.get(key)
    if (!deps) {
      depsMap.set(key, deps = new Set())
    }
    deps.add(activeEffect)
    return target[key]
  },
  set(target, key, newVal) {
    console.log('set');
    target[key] = newVal
    const depsMap = bucket.get(target)
    if (!depsMap) {
      return
    }
    const effects = depsMap.get(key)
    effects && effects.forEach(fn => fn())
    return true
  }
})

function effect(fn) {
  activeEffect = fn
  fn()
}
effect(() => {
  document.body.innerHTML = obj.text
})
setTimeout(() => {
  obj.text = 'hello vue3'
  // obj.notExit = 'hello vue3'
}, 1000);